<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{

            display: flex;
            width: 600px;
            height:400px;
            background-color: pink;
            flex-wrap: wrap;
            /*flex布局一般不换行*/
            /*flex-wrap: nowrap;*不换行*/
           /*flex-wrap: wrap;换行*/
            /*justify-content需确定主轴x，y*/
            /*flex-direction: row;*/
            /*justify-content: space-around; 平分*/
             /*justify-content: flex-start;开头开始*/
             /*justify-content: flex-end;尾部开始*/
             /*justify-content: center;居中*/
             /*justify-content: space-between;先二边贴边，再平分*/
             /*默认为从左到右，flex-direction:row-reverse;从右到左*/
            /*flex-direction:column 从上到下*/
            /*flex-direction:column-reverse*从下到上*/
            /*align-items: center;侧轴居中*/
            /*align-items: flex-end;侧轴从尾部开始*/
            /*align-items: flex-start;侧轴从开头开始*/
            /*align-items: stretch;拉伸*/
            /*有换行，则用align-content*/
            /*align-content: center;多行居中侧轴*/ 
            /*align-content: flex-end;侧轴尾部开始*/
            /*align-content: flex-start;侧轴开头开始*/
            /*align-content: space-around;侧轴平分*/
            /*align-content: space-between;侧轴先二边贴边，再平分*/
            /*align-content: stretch;平分侧轴*/
            /*flex-direction: column;
            flex-wrap: wrap;*/
            /*把设置主轴方向和是否换行简写*/
            /*flex-flow: column wrap;*/

        }
        div span{
            width: 150px;
           height: 100px;
            background-color: greenyellow;
            margin:10px;
            color: #fff;
        }
        div span:nth-child(3){
            align-self: flex-end;
        }
        div span:nth-child(2){
            /*默认为0，-1比0小，所以在前*/
            order: -1;
        }
        div span:nth-child(3){
            /*默认为0，-1比0小，所以在前*/
            order: -2;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        
        
    </div>
</body>
</html>